	 
	<style type="text/css">
		.container-box{
			display: flex;
		}
		.layui-leftbox{
			flex: 0 0 20vw;
			height: 100vh;
			background-color: #666;
		}
		.rightbox{
			flex: 0 0 80vw;
			height: 100vh;
			background-color: #888;
		}
	</style>



<!-- layui / 侧边栏布局 start-->
	<div class="container-box">
		<div class="layui-leftbox">
			<!--嵌入layui框架的侧边导航栏组件-->
			<!-- 框架的组件文档 "https://www.layui.com/doc/element/nav.html" -->
			<ul class="layui-nav layui-nav-tree" lay-filter="test" style="height: 100%;width: 100%">
			  <li class="layui-nav-item layui-nav-itemed">
			    <a href="javascript:;">默认展开</a>
			    <dl class="layui-nav-child">
			      <dd><a href="javascript:;">选项1</a></dd>
			      <dd><a href="javascript:;">选项2</a></dd>
			      <dd><a href="javascript:;">跳转</a></dd>
			    </dl>
			  </li>
			  <li class="layui-nav-item">
			    <a href="javascript:;">解决方案</a>
			    <dl class="layui-nav-child">
			      <dd><a href="javascript:;">移动模块</a></dd>
			      <dd><a href="javascript:;">后台模版</a></dd>
			      <dd><a href="javascript:;">电商平台</a></dd>
			    </dl>
			  </li>
			  <li class="layui-nav-item"><a href="javascript:;">产品</a></li>
			  <li class="layui-nav-item"><a href="javascript:;">大数据</a></li>
			</ul>
			<!--layui框架的导航栏组件结束-->
		</div>


		<!-- 右侧内容区域 -->
		<div class="rightbox">
			
			
		</div>
	</div>
	
	<script type="text/javascript">
		//注意：导航 依赖 element 模块，否则无法进行功能性操作
		layui.use('element', function(){
		  var element = layui.element;
		  
		  //…
		});

		//获取侧边栏元素
		var navitem=$('.layui-nav .layui-nav-item');
		//..dosomething
		navitem.click(function(){
			//dosomething
			console.log($(this).index());
		})
	</script>
	<!-- layui / 侧边栏布局 end-->
